{% extends base_template %}

{% load seahub_tags i18n staticfiles %}
{% load url from future %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{% static "css/magnific-popup.css" %}" />
{% endblock %}

{% block main_panel %}
    <h2>{{ dir_name }}</h2>
    <p>{% trans "Shared by: " %}{{ username|email2nickname }}</p>

    <div class="repo-file-list-outer-container">
        <div class="repo-file-list-inner-container">
            <div class="repo-file-list-topbar ovhd">
                <p class="path fleft">
                {% trans "Current path: "%}
                {% for name, link in zipped %}
                {% if not forloop.last %}
                <a href="{% url "view_shared_dir" token %}?p={{ link|urlencode }}">{{ name }}</a> /
                {% else %}
                {{ name }}
                {% endif %}
                {% endfor %}
                </p>
                {% if not traffic_over_limit %}
                <a href="?p={{ path|urlencode }}&dl=1" class="obv-btn fright">{% trans "ZIP"%}</a>
                {% endif %}
            </div>
            <table class="repo-file-list" style="table-layout:fixed;">
                <tr>
                    <th width="5%"></th>
                    <th width="55%">{% trans "Name"%}</th>
                    <th width="20%">{% trans "Size"%}</th>
                    <th width="20%">{% trans "Operations"%}</th>
                </tr>

                {% for dirent in dir_list %}
                <tr>
                    <td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                    <td>
                        <a href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                    </td>

                    <td></td>
                    <td>
                      {% if not traffic_over_limit %}
                      <a class="op-icon vh" href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans 'Download' %}">
                          <img src="{{MEDIA_URL}}img/download.png" alt="" />
                      </a>
                      {% endif %}
                    </td>
                </tr>
                {% endfor %}

                {% for dirent in file_list %}
                <tr class="file-item" data-name="{{dirent.obj_name}}" >
                    {% if dirent.allow_generate_thumbnail %}
                        {% if dirent.encoded_thumbnail_src %}
                            <td class="dirent-icon"><img class="thumbnail" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="{% trans "File"%}" /></td>
                        {% else %}
                            <td class="dirent-icon"><img class="not-thumbnail" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                        {% endif %}
                    {% else %}
                        <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                    {% endif %}

                    <td>
                        {% if dirent.is_img %}
                        <a class="normal img-name-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_raw_shared_file" token dirent.obj_id dirent.obj_name %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                        {% else %}
                        <a class="normal" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                        {% endif %}
                    </td>

                    <td>{{ dirent.file_size|filesizeformat }}</td>
                    <td>
                      {% if not traffic_over_limit %}
                      <a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}">
                          <img src="{{MEDIA_URL}}img/download.png" alt="" />
                      </a>
                      {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{% static "scripts/lib/jquery.magnific-popup.js" %}"></script>
<script type="text/javascript">
$(function() {
    {% if traffic_over_limit %}
    var tip = "{% trans "File download is disabled: the share link traffic of owner is used up." %}";
    $('#title-panel').html('<p class="alc" style="background:#fddaa4;color:#1f0600;padding:3px 0;margin:0 0 15px;">' + tip + '</p>').removeClass('hide');
    {% endif %}
});

$('.repo-file-list').magnificPopup({
    type: 'image',
    delegate: '.img-name-link',
    tClose: "{% trans "Close (Esc)" %}", // Alt text on close button
    tLoading: "{% trans "Loading..." %}", // Text that is displayed during loading. Can contain %curr% and %total% keys
    gallery: {
        enabled: true,
        tPrev: "{% trans "Previous (Left arrow key)" %}", // Alt text on left arrow
        tNext: "{% trans "Next (Right arrow key)" %}", // Alt text on right arrow
        tCounter: "{% trans "%curr% of %total%" %}" // Markup for "1 of 7" counter
    },
    image: {
        titleSrc: function(item) {
            var el = item.el;
            var img_name = el[0].innerHTML;
            var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + "{% trans "Open in New Tab" %}" + '</a>';
            return img_name + '<br />' + img_link;
        },
        tError: '{% trans '<a href="%url%" target="_blank">The image</a> could not be loaded.' %}' // Error message when image could not be loaded
    }
});

{% if not repo.encrypted and ENABLE_THUMBNAIL %}
// get thumbnails for image files
var cur_path = "{{path|escapejs}}";
$(function() {
    var img_icons = $('.not-thumbnail');
    if (img_icons.length == 0) {
        return;
    }
    var get_thumbnail = function(i) {
        var img_icon = $(img_icons[i]),
            file_name = img_icon.closest('.file-item').attr('data-name');
        $.ajax({
            url: '{% url "share_link_thumbnail_create" token %}?path=' + e(cur_path + file_name),
            cache: false,
            dataType: 'json',
            success: function(data) {
                if (data) {
                    img_icon.attr("src", '{{ SITE_ROOT }}' + data.encoded_thumbnail_src).load(function() {
                        $(this).removeClass("not-thumbnail").addClass("thumbnail");
                    });
                }
            },
            complete: function() {
                // cur_path may be changed. e.g., the user enter another directory
                if (i < img_icons.length - 1) {
                    get_thumbnail(++i);
                }
            }
        });
    };
    get_thumbnail(0);
});
{% endif %}
</script>
{% endblock %}
